<script setup lang="ts">
defineOptions({
  name: "ALL_FAB_MONITORING_SETCONTENT"
});

import { ref, onMounted, onUnmounted, markRaw } from "vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { DocumentChecked, Histogram } from "@px-ui/icons-vue";
import commonTable from "@/views/common/components/commonTable/index.vue";
import commonSearch from "@/views/common/components/commonSearch/index.vue";
import previewSpec from "../specOverView/components/previewSpec.vue";
import { queryFabSPECContentList, updateFabSPECContent } from "@/api/modules/fab";
import { useRouterStoreHook } from "@/store/modules/router";
import { useSearchOption, useTableCloumns } from "./hooks";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";
const routerStore = useRouterStoreHook();

const searchLoading = ref<boolean>(false);
const gap = 80;
const defaultHeight = 606;
const fabListTableRef = ref<HTMLElement | null>(null);
const commonTableRef = ref<CommonTable.TableRefType>(null);
const commonSearchRef = ref<CommonSearch.SearchFormRefType>(null);
const scrollbarHeight = ref<number>(defaultHeight);
const searchOption = ref<Array<CommonSearch.SearchOption>>(useSearchOption());
const tableCloumns = ref<Array<CommonTable.TableCloumnsType>>(useTableCloumns());
const selectionList = ref<Array<any>>([]);
const previewSpecVisible = ref<boolean>(false);
const previewSpecList = ref<Array<any>>([]);
const eqpId = ref<string>("");

const operationOptions: Array<CommonTable.operationOptionItemType> = [
  {
    content: "预览",
    auth: `${routerStore.subject}_FAB_MONITORING_SETCONTENT_PREVIEW_BTN`,
    icon: markRaw(Histogram),
    isDisabled(scope: any) {
      const {
        row: { quotaList = null }
      } = scope;
      return !quotaList?.length;
    },
    click: (scope: any) => preview(scope.row)
  },
  {
    content: "提交",
    auth: `${routerStore.subject}_FAB_MONITORING_SETCONTENT_EDIT_BTN`,
    icon: markRaw(DocumentChecked),
    isDisabled(scope: any) {
      const {
        row: { quotaList = null }
      } = scope;
      return !quotaList?.length;
    },
    click: (scope: any) => edit(scope.row)
  }
];

const params = ref<any>({});
let defaultParams: any = {};
let currentParams: any = {};

const getSelectableFn = (row: any, index: number): boolean => {
  const { quotaList = [] } = row;
  return !!quotaList?.length;
};

const updateParams = () => {
  params.value = { ...defaultParams, ...currentParams };
};

const submitSearchFormHandler = (form: any) => {
  currentParams = { ...currentParams, ...form };
  updateParams();
};

const edit = async (row: any) => {
  PxMessageBox.confirm("确定要修改这些关注内容吗？", "注意", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    const { quotaList } = row;
    if (!quotaList?.length) return;
    const updateSpecQuotaDTOs = quotaList.map(item => {
      const { singleCode = "", quotaStatus = false } = item;
      return { singleCode, quotaStatus };
    });
    await updateFabSPECContent(updateSpecQuotaDTOs);
    await commonTableRef.value.queryTableData();
    PxMessage.success("提交成功");
  });
};

const preview = (row: any) => {
  const { quotaList = [], eqpId: eqpId_ = "" } = row;
  if (quotaList?.length && quotaList.some(item => item.quotaStatus)) {
    eqpId.value = eqpId_;
    previewSpecList.value = [...quotaList];
    previewSpecVisible.value = true;
  } else {
    PxMessage.warning("请选中至少一个指标！");
  }
};

const selectionChangeHandler = (val: Array<any>) => {
  selectionList.value = val;
};

const submitHandler = () => {
  if (selectionList.value?.length) {
    PxMessageBox.confirm("确定要修改这些关注内容吗？", "注意", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(async () => {
      const arr = selectionList.value.reduce((pre, cur) => {
        const { quotaList = null } = cur;
        if (quotaList?.length) {
          pre.push(...quotaList);
        }
        return pre;
      }, []);
      const updateSpecQuotaDTOs = arr.map(item => {
        const { singleCode = "", quotaStatus = false } = item;
        return { singleCode, quotaStatus };
      });
      await updateFabSPECContent(updateSpecQuotaDTOs);
      commonTableRef.value.clearSelection();
      await commonTableRef.value.queryTableData();
      PxMessage.success("提交成功");
    });
  } else {
    PxMessage.warning("请选择内容！");
  }
};

onMounted(async () => {
  await useUpdateDomHeight(scrollbarHeight, fabListTableRef, gap, defaultHeight);
});

onUnmounted(() => useCancelUpdateDomHeight());
</script>

<template>
  <div v-loading="searchLoading" class="setContent-content">
    <div class="setContent-content-search">
      <commonSearch
        v-if="searchOption?.length"
        ref="commonSearchRef"
        v-model:loading="searchLoading"
        :row-num="4"
        :operation-span="3"
        :option="searchOption"
        @submit="submitSearchFormHandler"
        @reset="submitSearchFormHandler"
      />
    </div>
    <div class="setContent-content-btns">
      <px-button v-has="`${routerStore.getSubject}_FAB_MONITORING_SETCONTENT_BATCH_SUBMIT_BTN`" type="primary" @click="submitHandler"
        >批量提交</px-button
      >
    </div>
    <div ref="fabListTableRef" class="setContent-content-table">
      <commonTable
        ref="commonTableRef"
        selection
        indexNeed
        :operationOptions="operationOptions"
        :tableCloumns="tableCloumns"
        :selectable="getSelectableFn"
        :height="scrollbarHeight"
        :axiosApi="queryFabSPECContentList"
        :params="params"
        @selection-change="selectionChangeHandler"
      />
    </div>
    <previewSpec v-if="previewSpecVisible" v-model="previewSpecVisible" :list="previewSpecList" :eqpId="eqpId" />
  </div>
</template>

<style lang="scss" scoped>
.setContent-content {
  box-sizing: border-box;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;

  .setContent-content-btns {
    margin-top: 16px;
  }

  .setContent-content-table {
    margin-top: 16px;
  }
}
</style>
